<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表筛选</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			
		</style>
	</head>
	<body>
		
		<div id="box">
			
			<h2>人员列表</h2>
			<input placeholder="请输入搜索的关键字" v-model='keyWords'/>
			<ul>
				<li v-for="(p,index) in filpersons" :key='p.id'>
					{{p.name}}---{{p.age}}---{{p.sex}}
				</li>
			</ul>
			
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#box',
				data:{
					persons:[
						{id:'001',name:'马冬梅',age:18,sex:"女"},
						{id:'002',name:'周冬雨',age:19,sex:"女"},
						{id:'003',name:'周杰伦',age:20,sex:"男"},
						{id:'004',name:'温兆伦',age:21,sex:"男"}
					],
					keyWords:''
				},
				computed: {
					filpersons() {
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWords)!=-1
						})
					}
				},
			})
		</script>
</html>